<template>
    <div id="case">
        <section class="case-banner">
            <div class="bg-img">
                <div class="case-rotate">
                    <img src="../assets/case_svg.png" alt="">
                </div>
                <div class="banner-title">
                    <h5>量子 — 合作伙伴</h5>
                    <p>强强联合 共创企业辉煌</p>
                </div>
            </div>
        </section>
        <caseSuccess />
        <div class="companies">
            <div class="companies-title">
                <h5>来自20家企业的信任</h5>
                <p>Trust from 20 companies</p>
            </div>
            <div class="companies-img container">
                <img src="../assets/cooperation.png" alt="">
            </div>
        </div>
        <div class="companies why-lzqs">
            <div class="companies-title">
                <h5>为什么选择量子启示</h5>
                <p>Why Choose Quantum Enlightenment</p>
            </div>
            <div class="why-select container">
                <ul>
                    <li v-for="(item, index) in lzqsIconList" :key="index">
                        <div class="icon-cont">
                            <img :src="item.iconUrl" alt="">
                        </div>
                        <div class="why-dir">
                            <h6>{{item.labelTitle}}</h6>
                            <p>{{item.labelDir}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import caseSuccess from '~/components/_CaseSuccess'
    export default {
        name:'cases',
        data () {
            return {
                lzqsIconList:[
                    {
                        iconUrl: require("~/assets/hj.png"),
                        labelTitle: "快速稳定",
                        labelDir: '天下武功唯快不破，打造互联网速度'
                    },
                    {
                        iconUrl: require("~/assets/star.png"),
                        labelTitle: "极致响应",
                        labelDir: '极致的思维、产品、服务、您本就应该坐享其成'
                    },
                    {
                        iconUrl: require("~/assets/xin.png"),
                        labelTitle: "谦卑为怀",
                        labelDir: '对事待人常有谦卑之心，只为脱颖而出'
                    }
                ]
            }
        },
        components:{
            caseSuccess
        }
    }
</script>
<style lang="stylus" scoped>
@import '../static/styl/mixin.styl';
#case
    .case-banner
        height 697px
        background:linear-gradient(0deg,rgba(0,0,3,1),rgba(5,18,144,1));
        .bg-img
            width 100%
            height 100%
            bgImg('../assets/case_bg.png', cover )
            position relative
            .case-rotate
                width 600px
                height 600px
                padding 80px 0 0
                margin 0 auto
                img
                    animation identifier 100s infinite linear
            .banner-title
                positCenter(50%, auto, auto, 50%, -50%, -50%)
                color #fff
                margin 0 auto
                text-align center
                h5
                    font-size 52px
                p
                    font-size 30px
                    margin-top 27px
    .companies
        background-color #FAFAFA
        padding 92px 0 111px
        text-align center
        .companies-title
            margin-bottom 108px
            h5
                font-size 42px
                margin-bottom 20px
            p
                font-size 16px
                color #666
    .why-lzqs
        background-color #fff
        .why-select
            ul
                display flex
                justify-content space-between
                li
                    text-align center
                    .icon-cont
                        width 180px
                        height 180px
                        margin 0 auto 23px
                    .why-dir
                        h6
                            font-size 22px
                            color #333333
                            margin-bottom 30px
                        p
                            font-size 14px
                            color #666
@keyframes identifier
    0%
        transform rotate(0deg)
    100%
        transform rotate(360deg)
</style>